<template>
  <div class="vuln-environment-list">
    <div
      class="header-actions"
      style="margin-bottom: 20px"
    >
      <h1>漏洞验证环境列表</h1>
    </div>
    <!-- 漏洞列表 -->
    <base-table
      :data="environmentList"
      :loading="loading"
      :total="total"
      v-model:page="currentPage"
      v-model:limit="pageSize"
      @pagination="handleCurrentChange"
      @selection-change="handleSizeChange"
    >
      <el-table-column prop="name" label="环境名称" />
      <el-table-column prop="ID" label="漏洞ID" width="200"/>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" link icon="Open" @click="handleEdit(row, 'start')">
            启动
          </el-button>
          <el-button type="primary" link icon="Close" @click="handleEdit(row, 'stop')">
            关闭
          </el-button>
          <el-button type="primary" link icon="InfoFilled" @click="handleInfo(row)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </base-table>
  </div>
</template>

<script setup>
import {
  getVulnEnvironmentList,
  OperateVulnEnvironment
} from "@/api/topo/vulnEnvironment";
import BaseTable from "@/components/BaseTable/index.vue";
import { useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
const router = useRouter();
// 数据和加载状态
const loading = ref(false);
const environmentList = ref([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const statusFilter = ref("");

// 获取环境列表
const fetchEnvironmentList = async () => {
  loading.value = true;
  try {
    const params = {
      page_index: currentPage.value,
      page_size: pageSize.value,
    };

    if (statusFilter.value) {
      params.status = statusFilter.value;
    }

    const { data } = await getVulnEnvironmentList(params);
    environmentList.value = data.list
    total.value = data.total;
  } catch (error) {
    console.error("获取漏洞验证环境列表失败", error);
    ElMessage.error("获取漏洞验证环境列表失败");
  } finally {
    loading.value = false;
  }
};
// 开启 关闭
const handleEdit = (row, type) => {
  // 二次确认提醒
  ElMessageBox.confirm(
    `确定要${type === 'start' ? '启动' : '停止'}该验证环境吗？`,
    '操作确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
.then(() => {
  // 用户确认操作后继续执行
  OperateVulnEnvironment({
    id: row.ID,
    operation: type
  }).then(res => {
    if (res.code === 200) {
      ElMessage.success("操作成功");
      fetchEnvironmentList();
    } else {
        ElMessage.error(res.message);
      }
    });
  });
}

// 处理分页变化
const handleSizeChange = (val) => {
  pageSize.value = val.limit;
  currentPage.value = val.page;
  fetchEnvironmentList();
};

const handleCurrentChange = (val) => {
  currentPage.value = val.page;
  pageSize.value = val.limit;
  fetchEnvironmentList();
};

// 组件挂载时加载数据
onMounted(() => {
  fetchEnvironmentList();
});

// 跳转详情
const handleInfo = (data) => {
  router.push({
    name: 'ScenesManage',
    query: {
      id: data.ID,
      name: data.name,
    },
  })
}
</script>

<style lang="scss" scoped>
.vuln-environment-list {
  padding: 20px;

  .pagination-container {
    margin-top: 20px;
  }
}
</style>
